<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站</title>
    <!--    引入CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="css航.css">
    <link rel="stylesheet" href="css表.css">
    <link rel="stylesheet" href="css播.css">
    <link rel="stylesheet" href="css栏.css">
    <link rel="stylesheet" href="css频.css">
    <style>
        /*全局样式*/
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);*/
            /*height: 200vh;*/
        }
    </style>
</head>

<body>
<!--导航栏-->
<nav class="navbar">
    <a href="子页.html">子页</a>
    <a class="active" target="_blank" href="https://gitee.com/zch08029/comprehensive-task-3">Gitee仓库</a>
</nav>
<main>

    <!--    轮播图 -->
    <section class="banner">
        <div class="carousel">
            <div class="carousel-images">
                <img src="imgb1.jpg" alt="Image 1">
                <img src="imgb2.jpg" alt="Image 2">
                <img src="imgb3.jpg" alt="Image 3">

            </div>
            <button class="carousel-button carousel-button-prev">上一页</button>
            <button class="carousel-button carousel-button-next">下一页</button>
        </div>
    </section>
    <!--    列表 -->
    <section class="card_container">
        <h1>列表</h1>
        <div class="card_box">
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp1.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp2.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp3.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp4.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
        </div>
        <div class="card_box">
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp1.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp2.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp3.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
            <div class="card animate__animated animate__delay-1s">
                <img src="imgp4.jpg" alt="Placeholder Image">
                <div class="card-content">
                    <h2 class="card-title">Card Title</h2>
                    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget
                        leo in
                        ipsum venenatis accumsan.</p>
                </div>
            </div>
        </div>
    </section>
    <section class="videobox">
        <video src="img频.mp4" controls autoplay muted></video>
        <h4>为缩减视频体积，视频码率较低</h4>
    </section>
    <section class="bottom_bar">
        <div class="bottom-container">
            <div class="left-box">
                <div class="bottom-svg-box">
                    <button type="button" data-icon="wechat">
                        <svg class="icon">
                            <use href="./img/icon.svg#wechat"></use>
                        </svg>
                    </button>
                    <button type="button" data-icon="weibo">
                        <svg class="icon">
                            <use href="./img/icon.svg#weibo"></use>
                        </svg>
                    </button>
                    <button type="button" data-icon="youtube">
                        <svg class="icon">
                            <use href="./img/icon.svg#youtube"></use>
                        </svg>
                    </button>
                    <button type="button" data-icon="facebook">
                        <svg class="icon">
                            <use href="./img/icon.svg#facebook"></use>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="right-box">
                <div class="bottom-about">
                    <p style="display:inline;">组员：</p>
                    <span><a data-text="庄灿煌">庄灿煌</a></span>
                    <span><a data-text="陈楚仁">陈楚仁</a></span>
                    <span><a data-text="徐广燃">徐广燃</a></span>
                    <span><a data-text="李昊天">李昊天</a></span>
                    <span><a data-text="郑文鸿">郑文鸿</a></span>
                    <span><a data-text="吴锦洋">吴锦洋</a></span>
                </div>
            </div>
        </div>
    </section>
</main>
<script src="jsarousel.js"></script>
<script src="jscript.js"></script>
</body>

</html>